<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米购物车</title>
    <style>
        * {
            margin: 0 auto;
            padding: 0;
            font-size: 14px;
            text-align: center;
            list-style: none;
        }
        
        .box {
            width: 1200px;
        }
        
        ul {
            width: 238px;
            float: left;
            border: 1px solid gainsboro;
            margin-bottom: 50px;
        }
        
        ul img {
            width: 100%;
            height: 18%;
        }
        
        ul span {
            line-height: 30px;
        }
        /* 内容 */
        
        .main table {
            width: 100%;
            border: 1px solid gainsboro;
            line-height: 30px;
        }
        
        .main table tbody {
            line-height: 20px;
        }
        
        .main table img {
            width: 80px;
            height: 100px;
        }
    </style>
</head>

<body>
    <!-- 框架 -->
    <div class="box">
        <!-- 头部 -->
        <div class="header">
            <h2>商品列表展示</h2>
            <div class="bottom">
                <ul>
                    <li>
                        <img src="../img/1.png" alt="">
                        <p>米家电磁炉</p>
                        <span>
                            <i>249元</i><br>
                            <button type="button" class="btn">加入购物车</button>
                        </span>
                    </li>
                </ul>
                <ul>
                    <li>
                        <img src="../img/2.png" alt="">
                        <p>小米USB Type C 快速充电数据线</p>
                        <span>
                            <i>16.9元</i><br>
                            <button type="button" class="btn">加入购物车</button>
                        </span>
                    </li>
                </ul>
                <ul>
                    <li>
                        <img src="../img/3.png" alt="">
                        <p>小米随身手电筒</p>
                        <span>
                            <i>79元</i><br>
                            <button type="button" class="btn">加入购物车</button>
                        </span>
                    </li>
                </ul>
                <ul>
                    <li>
                        <img src="../img/4.png" alt="">
                        <p>米家压力IH电饭煲1S</p>
                        <span>
                            <i>899元</i><br>
                            <button type="button" class="btn">加入购物车</button>
                        </span>
                    </li>
                </ul>
                <ul>
                    <li>
                        <img src="../img/5.png" alt="">
                        <p>空调（1.5匹/变频/一级能效）</p>
                        <span>
                            <i>1999元</i><br>
                            <button type="button" class="btn">加入购物车</button>
                        </span>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 内容 -->
        <div class="main">
            <table border="1" cellpadding="0" cellspacing="0">
                <thead>
                    <tr>
                        <th>全选</th>
                        <th>商品</th>
                        <th>数量</th>
                        <th>单价</th>
                        <th>小计</th>
                        <th>操作</th>
                        <th>时间</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- <tr>
                        <td>
                            <input type="checkbox">
                        </td>
                        <td>
                            <img src="../img/1.png" alt="">
                            <dd>米家电磁炉</dd>
                        </td>
                        <td>
                            <input type="button" value=" - ">
                            <input type="text" value="1">
                            <input type="button" value=" + ">
                        </td>
                        <td>249元</td>
                        <td>249.00</td>
                        <td>
                            <button type="button" onclick="del()">删除</button>
                        </td>
                        <td>6:58:57</td>
                    </tr> -->
                </tbody>
                <tfoot>
                    <td>
                        <input type="checkbox">全选按钮
                    </td>
                    <td>
                        <button type="button" onclick="delAll()">删除选中商品</button>
                    </td>
                    <td colspan="4"></td>
                    <td>总价：249</td>
                </tfoot>
            </table>
        </div>
    </div>

    <script>
        var lis = document.querySelectorAll('.box > li');
        var btns = document.querySelectorAll('.btn');
        var ps = document.querySelectorAll('li > p');
        var is = document.querySelectorAll('li > span > i');

        var tbody = document.querySelector('tbody');
        //建一个空数组，用来存储
        var arr;

        //判断本地存储是否有内容，并渲染
        if (localStorage.arr) {
            var arr = JSON.parse(localStorage.arr);
            show(arr);
        } else {
            arr = [];
        }

        //添加四个点击添加事件
        for (let i = 0; i < lis.length; i++) {
            lis[i].onclick = function() {
                for (var j = 0; j < lis.length; j++) {
                    if (i == j) {
                        lis[j].style.border = '1px solid red'
                    } else {
                        lis[j].style.border = ''
                    }
                }
            }
        }

        //添加
        // add.onclick = function() {
        //     var obj = {
        //         id: +new Date,
        //         src = arr[i].firstElementChild.getAttribute('src'),
        //         arr
        //     }
        // }


        //渲染
        function show(arr) {
            str = '';
            for (var i = 0; i < arr.length; i++) {
                str += `
                <tr>
                        <td>
                            <input type="checkbox">
                        </td>
                        <td>
                            <img src="${arr[i].src}" alt="">
                            <dd>米家电磁炉</dd>
                        </td>
                        <td>
                            <input type="button" value=" - ">
                            <input type="text" value="1">
                            <input type="button" value=" + ">
                        </td>
                        <td>249元</td>
                        <td>249.00</td>
                        <td>
                            <button type="button" onclick="del()">删除</button>
                        </td>
                        <td>6:58:57</td>
                    </tr>
                `;
            }
        }
    </script>
</body>

</html>